<template>
    <div class="home-header">
        <!-- left -->
        <div class="left">
            <i class="iconfont icon-fanhui"></i>
        </div>
        <!-- center -->
        <div class="center">
            <i class="iconfont icon-sousuo"></i>输入城市/景点/游玩主题
        </div>
        <!-- right -->
        <router-link to="/city">
            <div class="right">
                {{city}}<i class="iconfont icon-xiangxia"></i>
            </div>
        </router-link>
    </div>
</template>

<script>
    import store from '@/vuex/index.js'
    import {mapState} from 'vuex'

    export default {
        store,
        computed: {
            ...mapState(['city'])
        }
    }
</script>

<style lang="stylus" scoped>
    @import '~@/assets/style/varibles.styl'

    .home-header
        height $city_H
        background $blue
        display flex
        align-items center
        color #ffffff
        .left
            height .86rem
            width .86rem
            background $backgroundColor 
            text-align center
            line-height .86rem
        .center
            height .59rem
            flex auto
            padding 0 .12rem
            background #ffffff
            border-radius .12rem
            line-height .59rem
            color #aea7a7
            i
                margin-right .2rem
        .right
            color #ffffff
            height .86rem
            mini-width 1.5rem
            background $backgroundColor 
            display flex
            justify-content center
            align-items center
            padding-left .16rem
            i
                margin-left .16rem
                margin-right .16rem
                
</style>
